<template>
    <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="反馈主题" name="first">
                <el-table
                    ref="filterTable"
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                    prop="fbTime"
                    label="日期"
                    sortable
                    width="180"
                    column-key="date"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="posterNickname"
                    label="姓名"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="fbTitle"
                    label="标题"
                    width="120"
                    :formatter="formatter">
                    </el-table-column>
                    <el-table-column
                    prop="fbType"
                    label="类型"
                    width="45"
                    :filters="[{ text: '已解决', value: '已解决' }, { text: '待解决', value: '待解决' }]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end">
                    <template slot-scope="scope">
                        <el-tag
                        :type="scope.row.tag === '已解决' ? 'primary' : 'success'"
                        disable-transitions>{{scope.row.fbType}}</el-tag>
                    </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="新建反馈" name="second">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="标题" prop="name">
                        <el-input v-model="ruleForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="详细内容" prop="desc">
                        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { feedbackList } from '@/api/content'
import { newFeedback } from '@/api/table'
export default {
    data() {
        return {
            activeName: 'first',
            tableData: '',
            ruleForm: {
                title: '',
                fbTime: '',
                fbTitle:  ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '请填写内容', trigger: 'blur' }
                ]
            },
        }
    },
    created(){
        this.fetchFeedbackList()
    },
    methods: {

        fetchFeedbackList() {
            feedbackList().then(response => {
                console.log(response)
                this.tableData = response.data
                console.log(this.tableData)
            })
        },

        sendNewFeedbackList(){
            newFeedback().then(response => {
                console.log(response)
                if(response.data === 0){
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                }
            })
        },

      filterTag(value, row) {
        return row.tag === value;
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('提交成功!');
          } else {
            console.log('请检查输入内容是否符合规则!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    
    }
}
</script>

<style lang="scss" scoped>

</style>